 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>

    <div id="app"> 

        <!-- 调用组件的时候，把组件需要的参数传进去 -->
        <!-- <ul>
            <todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
        </ul> -->
        
        <!-- 直接使用自己定义的组件 -->
        <todo-list></todo-list>
    </div>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script>

         // 又定义了一个组件，重用了之前定义的组件 todo-list
         Vue.component('todo-list', {
             template: `
                <ul>
                    <todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
                </ul>
             `,
             // 组件中用到的数据 list，要定义在这里
             data() {
                 return {
                    list: [
                        {
                            title: '课程1',
                            del: false
                        }, {
                            title: '课程2',
                            del: false
                        }
                    ]
                 }
             },
         })

        //  定义一个组件 todo-item
         Vue.component('todo-item', {
             template: `
                <li>
                    <span v-if="!del">{{title}}</span>
                    <span v-else style="text-decoration:line-through">{{title}}</span>
                    <button v-show="!del">v-show</button>
                </li>
             `,
             // 组件需要的参数，定义在这里
             props: {
                 title: String,
                 del: {
                     type: String,
                     default: false
                 }
             },
             // 数据要用一个函数返回，如果直接定义一个对象的haunted，一个地方改了，全部都变了
             data() {
                 return {
                     
                 }
             },
             methods: {
                 
             },
         })

         var vm = new Vue({
             el: '#app',
             data: {
                 list: [
                    {
                        title: '课程1',
                        del: false
                    }, {
                        title: '课程2',
                        del: false
                    }
                ]
             }
         })
     </script>

    </body>
 </html>